<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="box  pd-30">
			<view class="list_box bd-r40 pd-30" v-for="(item, index) in list" :key="index">
				<view class="ft-28 fw-800">订购商品</view>
				<view class="item flex mt-20" @tap.stop="goPage('/subpackage/immigration/immigration?id=' + item.id)">
					<image class="imgs bd-r40" :src="item.cover" mode="aspectFill">
					</image>
					<view class="contnet ml-20">
						<view class="te-1 ft-28 fw-900">{{ item.name }}</view>
						<text class="ft-24 c-99">附加服务</text>
						<view class="tip ft-24 c-33">
							<view class="flex tip_model" @tap.stop="checkService(item.spec_info.service_info)">
								{{ item.spec_info.service_info.name }}
								<image src="https://cdn.oss.bon-top.cn/static_bc/images/right_icon.png"
									style="width: 20rpx;height: 34rpx;"></image>
							</view>
							<view class="btn" @tap.stop="deleteServe(item, index)">删除</view>
						</view>
					</view>
				</view>
			</view>
			<view class="com-empty" v-if="list.length == 0">暂无数据</view>
		</view>

		<!-- <dialogPop ref="diaLogPop" :option="option" @confirm='confirm'></dialogPop> -->
		<dialogPop ref="diaLogPop" :show="showModal" title="删除" :content='option.html' @confirm='confirm'
			@cancel='showModal = !showModal'>
		</dialogPop>
		<view style="height: 180rpx;"></view>
		<view class="btn_box pd-20">
			<view class="btn" @click="back">返回</view>
			<view class="btn submit" @click="sub">提交</view>
		</view>
	</view>

	<up-popup :show="showFuwu" mode="bottom" round="14" @open="openF">
		<view class="offers">
			<image class="popup-cancel wh-36" @click="closeF"
				src="https://cdn.oss.bon-top.cn/static_bc/images/popup-cancel.png"></image>
			<view class="ft1">服务</view>
			<view class="ft mt-12 c-99">{{ serviceInfo.name }}，适用说明</view>
			<scroll-view scroll-y="true" class="scroll-Y-service">
				<view class="card_6 flex mt-20 pd-20">
					<view class="card">
						<view class="flex" style="align-items: stretch;">
							<view class="left ft c-99"> 服务</view>
							<view class="right pd-20 ft">{{ serviceInfo.name }}</view>
						</view>
						<view class="flex" style="align-items: stretch;">
							<view class="left ft c-99"> 期限</view>
							<view class="right pd-20 ft">{{ serviceInfo.term }}</view>
						</view>
						<view class="flex" style="align-items: stretch;">
							<view class="left ft c-99"> 条件</view>
							<view class="right pd-20 ft">{{ serviceInfo.requirement }}
							</view>
						</view>

					</view>
				</view>
				<view class="card_7 mt-20 pd-20">
					<view class="ft1">其他</view>
					<view class="ft c-99 mt-10">{{ serviceInfo.des }}</view>
				</view>
			</scroll-view>
			<view class="bottomBtn flex-center">
				<view class="btn c-dbf flex-center ft" @click="showFuwu = false">知道了</view>
			</view>
		</view>
	</up-popup>

</template>

<script setup lang="js">
import {
	reactive,
	ref
} from 'vue';
import navHead from '@/components/navHead.vue';
import dialogPop from '@/components/dialogPop.vue';
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onLoad
} from "@dcloudio/uni-app";
const headData = reactive({
	color: '#fff',
	title: '修改订单'
})
const option = reactive({
	html: `删除后，将无法添加到附件服务到本订单中，<span class="c-33 fw-800">“保存修改”</span>后生效，如需再下订可以通过在 <span class="c-33 fw-800">“产品”</span>首页进入附加服务中再次下订。`,
	title: '确定要删除附加服务吗?',

})
const diaLogPop = ref('diaLogPop')
const showModal = ref(false)

const goPage = (url) => {
	uni.navigateTo({ url: url })
}
// 删除
const deleteId = ref('')
const deleteIndex = ref('')
const deleteServe = (item, index) => {
	showModal.value = true

	deleteId.value = item.id
	deleteIndex.value = index
}

// 删除提交
const del_additional_id = ref([])
const confirm = () => {
	showModal.value = false

	list.value.splice(deleteIndex.index, 1)
	del_additional_id.value.push(deleteId.value)
}

const serviceInfo = ref({})
const checkService = (info) => {
	serviceInfo.value = info
	showFuwu.value = true
}
const showFuwu = ref(false);
const closeF = () => {
	showFuwu.value = false
}
const openF = () => {
	showFuwu.value = true;
}

const back = () => {
	uni.navigateBack()
}

const sub = () => {
	const formData = {}
	formData.id = orderId.value
	formData.del_additional_id = del_additional_id.value
	utils
		.request(
			api.doEditAdditional, formData,
			"post"
		)
		.then((res) => {
			getApp().globalData.shouldRefresh = true;
			uni.navigateBack()
		});
}

const orderId = ref('')
const list = ref([])
const loadData = () => {
	utils
		.request(
			api.editAdditionalList, {
			id: orderId.value
		},
			"get"
		)
		.then((res) => {
			list.value = res.data.list
		});
}
onLoad(option => {
	orderId.value = option?.order_id || ''
	loadData()
})
</script>

<style lang="scss" scoped>
.box {}

.list_box {
	padding: 20rpx;
	background-color: #f8f8f8;

	.item {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 40rpx;

		.imgs {
			width: 148rpx;
			height: 175rpx;
			flex-shrink: 0;
		}

		.tip {
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;
			width: 430rpx;

			.tip_model {
				background: #ebebeb;
				padding: 20rpx;
				border-radius: 40rpx;
			}

			.btn {
				margin-top: 40rpx;
				color: #999;
			}
		}

	}
}

.deg {
	transform: rotate(-90deg);
}

.delete_box {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;


	.bg {
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: #999;
		opacity: 0.5;
		top: 0;
		left: 0;
	}

	.delete_model {
		position: absolute;
		background-color: #fff;
		text-align: center;
		width: 518rpx;
		height: 386rpx;
		top: calc(50% - (386rpx / 2));
		left: calc(50% - (518rpx / 2));

		.text {
			// padding: 20rpx;
		}

		.btn_model {
			.btn {
				width: 184rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				color: #333;
				background-color: #F8F8F8;
			}

			.sunbmit {
				background-color: #333;
				color: #DBF046;
			}
		}
	}

}

.btn_box {
	display: flex;
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-top: 10rpx;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.btn {
		text-align: center;
		line-height: 78rpx;
		height: 78rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		width: 196rpx;
		background-color: #fff;
	}

	.submit {
		flex: 1;
		background-color: #333;
		color: #DBF046;
		margin-left: 20rpx;
	}
}

.offers {
	height: 70vh;
	background: #f8f8f8;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	//border: 2rpx solid red;
	position: relative;
	padding: 40rpx;
	padding-bottom: calc(118rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(118rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
	width: 100vw;

	.popup-cancel {
		position: absolute;
		top: 44rpx;
		right: 44rpx;
	}

	.scroll-Y-service {
		height: calc(100% - 128rpx + env(safe-area-inset-bottom));
	}

	.list {
		height: calc(70vh - 128rpx + env(safe-area-inset-bottom));

		.scroll-Y {
			height: 100%;
		}

		.left {
			width: 182rpx;
			height: 144rpx;
			background: linear-gradient(90deg, #DBF046 0%, #FFEE7E 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			box-sizing: border-box;

			.tip {
				//  width: 88rpx;
				height: 36rpx;
				background: #333333;
				border-radius: 20rpx 8rpx 8rpx 8rpx;
			}

			.jia {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
		}

		.right {
			width: 508rpx;
			height: 144rpx;
			background: #ffffff;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}

	.pay-list {
		height: calc(70vh - 84rpx + env(safe-area-inset-bottom));

		.scroll-Y {
			height: 100%;
		}

		.m {
			width: 670rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			font-weight: 800;
			font-size: 28rpx;
			color: #333333;

			.comboItem {
				background: #F8F8F8;
				border-radius: 20rpx;
			}
		}
	}

	.card_6 {
		width: 670rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		.card {
			width: 630rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #F1F1F1;
			overflow: hidden;

			.left {
				height: auto;
				width: 108rpx;
				background: #F1F1F1;
				padding-top: 20rpx;
				padding-left: 20rpx;
			}

			.right {
				width: 522rpx;
				border-bottom: 2rpx solid #F1F1F1;
			}

			.flex:last-child {
				.right {
					border-bottom: none;
				}
			}
		}
	}

	.card_7 {
		width: 670rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.popuItem {
		width: 152rpx;
		height: 72rpx;
		background: #f1f1f1;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.active {
		background: #dbf046;
	}

	.content {
		width: 100%;
		height: calc(70vh - 240rpx + env(safe-area-inset-bottom));
		// height: 756rpx;

		//  border: #1746ff solid 2rpx;
		.scroll-Y {
			// height: 756rpx;
			height: 100%;
		}

		.neiriong {
			width: 670rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 40rpx 40rpx;

			//height: 1200rpx;
			.cardItem {
				width: 630rpx;
				//height: 148rpx;
				background: #f8f8f8;
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.icon_quan {
					width: 32rpx;
					height: 32rpx;
					background: #ff0000;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					text-align: center;
				}
			}

			.price {
				justify-content: flex-end;
				flex-direction: column;
				align-items: flex-end;
			}

			.jieshi {
				width: 630rpx;
				height: 264rpx;
				background: #fff3ec;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
			}

			.pCard {
				width: 670rpx;
				// height: 542rpx;
				background: #ffffff;
				border-radius: 40rpx 40rpx 40rpx 40rpx;

				// border: 2rpx solid red;
				.samllCard {
					width: 630rpx;
					//height: 372rpx;
					background: #ffffff;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 2rpx solid #f1f1f1;
					overflow: hidden;

					.line {
						height: 74rpx;

						.left {
							width: 200rpx;
							height: 76rpx;
							background: #f1f1f1;
						}

						.right {
							width: 460rpx;
							height: 74rpx;
							border-bottom: #F1F1F1 solid 2rpx;
						}
					}
				}
			}
		}
	}

	.bottomBtn {
		position: fixed;
		z-index: 99;
		bottom: 0;
		left: 0;
		background: #F8F8F8;
		width: 100%;
		padding-top: 20rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

		.btn {
			width: 448rpx;
			height: 78rpx;
			background: #333333;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
	}

}
</style>